<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AutoComplete</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!--    引入jquery     -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="../assets/js/jquery/jquery.autocomplete.js"></script>

</head>

<style>
    .text-field {
        padding: 0 15px;
        width: 20%;
        height: 40px;
        border: 1px solid #CBD3DD;
        font-size: 1.125em;
    }

    .autocomplete-suggestions {
        border: 1px solid #999;
        background: #FFF;
        overflow: auto;
    }

    .autocomplete-suggestion {
        padding: 2px 5px;
        white-space: nowrap;
        overflow: hidden;
    }

    .autocomplete-selected {
        background: #F0F0F0;
    }

    .autocomplete-suggestions strong {
        font-weight: normal;
        color: #3399FF;
    }

    .autocomplete-group {
        padding: 2px 5px;
    }

    .autocomplete-group strong {
        display: block;
        border-bottom: 1px solid #000;
    }
</style>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-4">
                <div class="input-group">
                    <input type="text" class="form-control" id="autocomplete" placeholder="人名、地名、诗词名" />
                    <div class="pull-right">
                        <img src="../assets/css/bootstrap/icons/search.svg" alt="" width="32" height="32" >
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    <script>
        $('#autocomplete').autocomplete({
            lookup: function (query, done) {
                // Do Ajax call or lookup locally, when done,
                // call the callback and pass your results:
                if(query==null||$.trim(query)=="")
                {
                    done({suggestions: []});
                    return;
                }
                var result = {
                    suggestions: [{
                            "value": "黄鹤楼-崔颢",
                            "data": "崔颢"
                        },
                        {
                            "value": "黄鹤楼-杜甫",
                            "data": "李白"
                        },
                        {
                            "value": "岳阳楼-王勃",
                            "data": "王勃"
                        },
                        {
                            "value": "卜算子·游泳-毛泽东",
                            "data": "毛泽东"
                        }
                    ]
                };
                done(result);
            },
            onSelect: function (suggestion) {

            }
        });
    </script>
</body>

</html>